---
title: Avatar
description: "Avatars are a great way to represent people or specific objects within your app. They can render as: an image, text content, icon, etc."
docType: Demo
docGroup: Components
group: Presentation
components: [Avatar]
---

# Avatar

Avatars are a great way to represent people or specific objects within your app. They can render as:

- an image
- text content
- icon

## Simple Avatar

An `Avatar` is usually a small image, icon, or 1-2 letters.

```demo source="./SimpleAvatar.tsx"

```

### Avatar Theme Colors

An avatar can use the current theme colors as a `background-color` by using the `theme` prop.

```demo source="./AvatarThemeColors.tsx"

```

### Default Avatar Colors

The avatar also supports using the `color` prop to set the text color and background-color
to different shades of the same color.

```demo source="./DefaultAvatarColors.tsx"

```

### Custom Avatar Colors

The avatar colors can be configured by modifying the
[$avatar-colors](/sassdoc/avatar#variable-colors) map, using the
[avatar-custom-color](/sassdoc/avatar#mixin-custom-color) mixin, or using
a custom class.

> !Warn! These colors will not automatically enforce the correct contrast ratio
> and must be manually checked.

```demo source="./CustomAvatarColors.tsx"

```

## Avatar Borders

Avatars do not have a border-color by default but can easily be added by:

- setting the `--rmd-avatar-border-color` variable
  (Recommended using [avatar-set-var](/sassdoc/avatar#mixin-avatar-set-var)
  mixin)
- adding a custom class

```demo source="./AvatarBorders.tsx"

```

## Avatar Size

The avatar can be updated to render as the same size as an icon by setting
`size="icon"`.

```demo source="./AvatarSize.tsx"

```
